<script setup>
import { RouterLink, RouterView } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { useThemeStore } from '@/stores/theme'
import { ref, onMounted, onBeforeUnmount } from 'vue' // 引入 ref 和生命周期钩子

import './assets/main.css'
const authStore = useAuthStore()
const themeStore = useThemeStore()

// 控制主题下拉菜单的显示状态
const isThemeMenuOpen = ref(false)
// 用于获取按钮元素以进行点击外部关闭的判断
const themeButtonRef = ref(null)

onMounted(async () => {
  await authStore.checkAuthOnLoad()
  // 添加全局点击事件监听器，用于点击外部关闭下拉菜单
  document.addEventListener('click', closeThemeMenuOnClickOutside)
})

onBeforeUnmount(() => {
  // 组件卸载前移除事件监听器，避免内存泄漏
  document.removeEventListener('click', closeThemeMenuOnClickOutside)
})

function handleLogout() {
  authStore.logout()
}

// 切换主题下拉菜单的显示/隐藏
function toggleThemeMenu() {
  isThemeMenuOpen.value = !isThemeMenuOpen.value
}

// 选择并设置主题
function selectTheme(themeName) {
  themeStore.setTheme(themeName)
  isThemeMenuOpen.value = false // 选择后关闭菜单
}

// 点击下拉菜单外部时关闭菜单
function closeThemeMenuOnClickOutside(event) {
  // 检查点击事件的目标是否在按钮或菜单内部
  if (themeButtonRef.value && !themeButtonRef.value.contains(event.target)) {
    // 如果点击发生在按钮或菜单之外，则关闭菜单
    // 注意: 这里假设下拉菜单是按钮的直接子元素或紧邻元素，
    // 如果菜单结构复杂，可能需要更精确的判断逻辑（例如给菜单也添加 ref）
    isThemeMenuOpen.value = false
  }
}

// 定义可用主题列表（可以从 store 或配置中获取）
const availableThemes = ref([
  { name: 'light', label: '清辉皎皎' },
  { name: 'dark', label: '静夜幽邃' },
  { name: 'sepia', label: '书香凝碧' }, // 对应 html.sepia 和 .theme-option-sepia
  { name: 'azure', label: '晴空蔚蓝' }, // 对应 html.azure 和 .theme-option-azure
])
</script>

<template>
  <header class="app-header">
    <nav class="main-nav">
      <!-- 左侧导航链接 -->
      <div class="nav-links">
        <RouterLink v-if="!authStore.isAuthenticated" to="/auth">登录/注册</RouterLink>
        <template v-if="authStore.isAuthenticated">
          <RouterLink to="/home">主页</RouterLink>
          <RouterLink to="/chat">聊天</RouterLink>
          <RouterLink to="/mine">我的</RouterLink>
        </template>
      </div>

      <!-- 右侧操作区域 -->
      <div class="nav-actions">
        <!-- 主题切换按钮和下拉菜单 -->
        <div class="theme-selector" ref="themeButtonRef">
          <button @click="toggleThemeMenu" class="theme-toggle-button" title="切换主题">
            <!-- 使用文字或图标 -->
            切换主题
            <!-- 或者使用 SVG 图标 -->
            <!-- <svg ... icon ... /> -->
          </button>
          <!-- 主题下拉菜单 -->
          <transition name="fade">
            <div v-if="isThemeMenuOpen" class="theme-menu">
              <ul>
                <li v-for="theme in availableThemes" :key="theme.name">
                  <button
                    @click="selectTheme(theme.name)"
                    :class="[
                      'theme-option-button', // 基础类
                      `theme-option-${theme.name}`, // 特定主题类，例如 'theme-option-light'
                      { active: themeStore.currentTheme === theme.name }, // 激活类
                    ]"
                  >
                    {{ theme.label }}
                  </button>
                </li>
                <!-- 未来可以添加更多主题 -->
              </ul>
            </div>
          </transition>
        </div>

        <!-- 退出登录按钮 (只有登录后显示) -->
        <button v-if="authStore.isAuthenticated" @click="handleLogout" class="logout-button">
          退出登录
        </button>
      </div>
    </nav>
  </header>
  <main class="app-main">
    <RouterView />
  </main>
  <footer class="app-footer">
    <p>© 2024 Your Website</p>
  </footer>
</template>

<style scoped>
.app-header {
  /* padding: 10px 20px; */
  padding: 0.625rem 1.25rem; /* 10/16, 20/16 */
  border-bottom: 1px solid var(--color-border); /* 应用边框颜色变量 */
  background-color: var(--color-header-bg); /* 应用头部背景色变量 */
}
.main-nav {
  display: flex;
  justify-content: space-between; /* 让左右两部分分开 */
  align-items: center; /* 垂直居中 */
  width: 100%; /* 确保导航占满头部宽度 */
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.25rem; /* 链接间距增大 */
}

.nav-links a {
  text-decoration: none;
  color: var(--color-text-nav);
  padding: 0.5rem 0;
  font-size: 1rem;
  font-weight: 500; /* 稍加粗 */
  position: relative; /* 为了底部线条效果 */
  transition: color 0.2s ease;
}

.nav-links a::after {
  /* 添加底部悬停/激活线条 */
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.08rem; /* 线条位置 */
  width: 100%;
  height: 0.08rem;
  background-color: var(--color-primary);
  transform: scaleX(0); /* 初始隐藏 */
  transition: transform 0.3s ease;
  transform-origin: left;
}

.nav-links a:hover::after,
.nav-links a.router-link-exact-active::after {
  transform: scaleX(1); /* 悬停或激活时显示线条 */
}

.nav-links a.router-link-exact-active {
  color: var(--color-primary); /* 激活状态颜色 */
  font-weight: 600; /* 激活状态加粗 */
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem; /* 右侧按钮间距 */
}

.theme-selector {
  position: relative; /* 让下拉菜单相对于按钮定位 */
}

.theme-toggle-button {
  background-color: var(--color-surface); /* 使用表面颜色 */
  border: 0.05rem solid var(--color-border-button);
  color: var(--color-text-secondary); /* 使用次要文字颜色 */
  padding: 0.4rem 0.8rem;
  border-radius: 0.375rem; /* 6px */
  cursor: pointer;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.theme-toggle-button:hover {
  background-color: var(--color-button-hover-bg);
  border-color: var(--color-border-button-hover);
  color: var(--color-text); /* 悬停时文字颜色变深 */
}

.theme-menu {
  position: absolute;
  top: calc(100% + 0.5rem); /* 定位在按钮下方，带一点间距 */
  right: 0; /* 右对齐 */
  min-width: 6.25rem; /* 下拉菜单最小宽度 */
  background-color: var(--color-surface);
  border: 0.05rem solid var(--color-border);
  border-radius: 0.375rem; /* 6px */
  box-shadow: 0 0.17rem 0.5rem var(--color-shadow); /* 更明显的阴影 */
  padding: 0.5rem;
  z-index: 10; /* 确保在其他内容之上 */
}

.theme-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.theme-menu li {
  margin-bottom: 0.35rem; /* 选项间距 */
}
.theme-menu li:last-child {
  margin-bottom: 0;
}

.theme-option-button {
  width: 100%;
  text-align: left;
  padding: 0.6rem 0.8rem;

  border: none;
  border-radius: 0.25rem; /* 4px */
  cursor: pointer;
  font-size: 0.875rem;
  transition:
    background-color 0.2s ease,
    transform 0.1s ease,
    box-shadow 0.2s ease;
  display: block; /* 确保按钮占满 li 宽度 */

  /* --- 主题样式应用 --- */
  /* 这里可以根据主题设置不同的背景和文字色，但更通用的做法是让按钮本身适应主题 */
  /* 例如，直接用 var(--color-surface) 和 var(--color-text) 通常效果不错 */

  /* --- 模拟凸起效果 (可选) --- */
  box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.05); /* 轻微底部阴影模拟凸起 */
}

.theme-option-button:hover:not(.active) {
  /* 仅在非激活状态下应用悬停 */
  /* background-color: var(--color-primary-hover); <-- 移除 */
  /* color: var(--color-button-text); <-- 移除 */
  transform: translateY(-1px); /* 轻微上移 */
  box-shadow: 0 0.13rem 0.24rem rgba(0, 0, 0, 0.08); /* 悬停时阴影稍明显 */
}

.logout-button {
  background-color: transparent; /* 透明背景 */
  border: 1px solid var(--color-border-button);
  color: var(--color-text-secondary); /* 次要文字颜色 */
  padding: 0.4rem 0.8rem;
  border-radius: 0.375rem; /* 6px */
  cursor: pointer;
  font-size: 0.875rem;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.logout-button:hover {
  background-color: var(--color-error); /* 悬停变红色 */
  border-color: var(--color-error);
  color: white; /* 文字变白 */
}

/* --- 过渡动画 --- */
.fade-enter-active,
.fade-leave-active {
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  transform-origin: top right; /* 从右上角开始变换 */
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scale(0.95); /* 轻微缩小 */
}
.app-main {
  /* padding: 20px; */
  padding: 1.25rem; /* 20/16 */
  /* 调整最小高度计算，考虑 rem 单位的 header/footer */
  min-height: calc(100vh - (0.625rem * 2 + 1.25rem * 2 + 1px + 1px)); /* 估算值，需精确 */
}
.app-footer {
  text-align: center;
  /* padding: 10px; */
  padding: 0.625rem; /* 10/16 */
  /* margin-top: 20px; */
  margin-top: 1.25rem; /* 20/16 */
  /* font-size: 0.9em; em 单位相对于父元素，rem 相对于根元素 */
  font-size: 0.875rem; /* 14/16 */
  color: var(--color-text-muted); /* 应用次要文字颜色变量 */
  border-top: 1px solid var(--color-border); /* 应用边框颜色变量 */
}

.logout-button {
  background: none;
  border: 0.05rem solid var(--color-border-button); /* 应用按钮边框色变量 */
  color: var(--color-text-button); /* 应用按钮文字色变量 */
  /* padding: 5px 10px; */
  padding: 0.3125rem 0.625rem; /* 5/16, 10/16 */
  border-radius: 0.25rem; /* 4/16，小圆角用 rem 或 px 均可 */
  cursor: pointer;
  margin-left: auto; /* 推到右侧 */
  font-size: 0.875rem; /* 14/16 */
}
</style>
